<template>
  <div class="home">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in lunboList" :key="item.bannerid">
        <img class="swipe_img" v-lazy="item.img" />
      </van-swipe-item>
    </van-swipe>
    <!-- nav列表 -->
    <van-grid :column-num="5">
      <van-grid-item v-for="item in navList" :key="item.navid" :icon="item.imgurl" :text="item.title" />
    </van-grid>
    <!-- spike秒杀 -->
    <div class="spike_box">
      <ul class="spike_ul1">
        <li class="spike_li1">嗨购秒杀</li>
        <li class="spike_li2">
          <!-- 倒计时组件 -->
          <van-count-down :time="time">
            <template #default="timeData">
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
        </li>
        <li class="spike_li3"><span>更多秒杀</span><van-icon class="arrow" name="arrow" /></li>
      </ul>
      <!-- 秒杀列表 -->
      <ul class="spike_ul2">
        <li class="spike_item" v-for="item in seckillList" :key="item.proid" @click="goDetail('/home/goodsinfo',item.proid)">
          <img class="spike_img" :src="item.img1" alt="">
          <div class="spike_mony">${{item.originprice}}</div>
        </li>
      </ul>
    </div>
    <!-- 商品分页 -->
    <div class="pagination_box">
      <van-list v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        offset="0"
        >
        <Pagination :goodsList="goodsList"></Pagination>
      </van-list>
    </div>
    <!-- 回到顶部 -->
    <div class="pagination_button top_button" @click="topButton" v-show="topShow">
      <van-icon name="arrow-up" />
    </div>
  </div>
</template>
<script>
import { getLunbo, getSeckillList, getGoodsList } from '../../api/index'
import mixins from '@/mixins'
import Pagination from '@/components/Pagination'
export default {
  mixins: [mixins],
  components: {
    Pagination
  },
  data() {
    return {
      lunboList: [],
      time: 30 * 60 * 60 * 1000,
      seckillList: [],
      goodsList: [],
      count: 0,
      total: 10,
      loading: false,
      finished: false,
      topShow: false,
      // nav数据
      navList: [
        {
          navid: 1,
          title: '嗨购超市',
          imgurl:
            'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png'
        },
        {
          navid: 2,
          title: '数码电器',
          imgurl:
            'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg'
        },
        {
          navid: 3,
          title: '嗨购服饰',
          imgurl:
            'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png!q70.jpg'
        },
        {
          navid: 4,
          title: '嗨购生鲜',
          imgurl:
            'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg.dpg'
        },
        {
          navid: 5,
          title: '嗨购到家',
          imgurl:
            'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg.dpg'
        },
        {
          navid: 6,
          title: '充值缴费',
          imgurl:
            'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png!q70.jpg.dpg'
        },
        {
          navid: 7,
          title: '9.9元拼',
          imgurl:
            'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/36069/14/16068/6465/60ec0f67E155f9488/595ff3e606a53f02.png!q70.jpg.dpg'
        },
        {
          navid: 8,
          title: '领券',
          imgurl:
            'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png!q70.jpg.dpg'
        },
        {
          navid: 9,
          title: '领金贴',
          imgurl:
            'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196711/35/12751/6996/60ec1000E21b5bab4/38077313cb9eac4b.png!q70.jpg.dpg'
        },
        {
          navid: 10,
          title: 'plus会员',
          imgurl:
            'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png!q70.jpg.dpg'
        }
      ]
    }
  },
  created() {
    this.getLunbo()
    this.getSeckillList()
    this.getGoodsList()
  },
  mounted() {
    // 滚动事件，控制回到顶部按钮显示隐藏
    window.addEventListener('scroll', () => {
      const html = document.documentElement
      if (html.scrollTop >= 250) {
        this.topShow = true
      } else {
        this.topShow = false
      }
    })
  },
  methods: {
    // 轮播图
    async getLunbo () {
      const res = await getLunbo()
      this.lunboList = res.data.data
    },
    // 秒杀列表
    async getSeckillList() {
      const res = await getSeckillList()
      this.seckillList = res.data.data
    },
    // 商品分页列表
    async getGoodsList() {
      ++this.count
      const res = await getGoodsList(this.count)
      this.goodsList = this.goodsList.concat(res.data.data)
    },
    // 商品分页数据的加载
    onLoad() {
      setTimeout(async () => {
        await this.getGoodsList()
        // 加载状态结束
        this.loading = false
        // 数据全部加载完成
        if (this.count >= this.total) {
          this.finished = true
        }
      }, 2000)
    },
    // 点击回到顶部
    topButton() {
      var timer = setInterval(() => { // 使用定时器回到顶部
        document.documentElement.scrollTop = 0
        if (document.documentElement.scrollTop <= 0) {
          clearInterval(timer)
        }
      }, 30)
    }
  }
}
</script>
<style lang="scss">
.home{
  padding:0px 10px;
  box-sizing: border-box;
  .my-swipe{
    margin-top: 54px;
    height: 200px;
    .swipe_img{
      height: 100%;
      width: 100%;
    }
  }
  .spike_ul1{
    height: 28px;
    width: 100%;
    margin-top: 8px;
    line-height: 28px;
    li{
      float: left;
    }
    .spike_li1{
      font-size: 16px;
      font-weight: 600;
      margin-right: 4px;
    }
    // 倒计时组件
    .colon {
      display: inline-block;
      margin: 0 4px;
      color: #ee0a24;
    }
    .block {
      display: inline-block;
      width: 22px;
      color: #fff;
      font-size: 12px;
      text-align: center;
      background-color: #ee0a24;
    }
    .spike_li3{
      float: right;
      span{
        font-size: 14px;
        color: #f66;
      }
      .arrow{
        border-radius: 50%;
        background: #ee0a24;
        color: white;
        margin-left: 6px;
      }
    }
  }
  .spike_ul2{
    width: 100%;
    display: flex;
    text-align: center;
    justify-content: space-between;
    .spike_item{
      img{
        width: 60px;
        height: 60px;
      }
      .spike_mony{
        font-size: 12px;
        color: red;
      }
    }
  }
  .pagination_box{
    background: #f2f2f2;
    margin-top: 10px;
    margin-bottom: 50px;
    .van-card__title {
      font-size: 14px;
    }
    .van-card__price{
      margin-bottom: 10px;
      color: red;
      font-size: 12px;
    }
  }
  .pagination_button{
    background: white;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    font-size: 20px;
    width: 30px;
    height: 30px;
    position: fixed;
    right: 15px;
    bottom: 10%;
  }
  .top_button{
    bottom: 15%;
  }
}
</style>